<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="text-decoration: underline;">下划线</div>
    <div style="text-decoration: line-through;">原价:9999</div>
    <div style="text-decoration: overline;"></div>
    <!-- text-align文本水平对齐 -->
    <!-- 文本缩进 text-indent-->
    <!-- text-transform 允许字体改变，⽂本变形-->
    <div style="text-transform: lowercase;">AB</div>
    <div style="text-transform: uppercase;">ab</div>
    <div style="text-transform: capitalize;">ab</div>
    <div style="text-align: center;">11111</div>
    <div style="text-align: center;">22222</div>
    <!-- 是一个关键字，它强制将字符（主要是表意文字和拉丁文字））--写在一个正方形内，使它们能够在通常的东亚文字（如中文或日文）中对齐。 -->
    <!-- <line-height>设置文本行高</line-height> -->
    <div style="text-align: center;border: 1px solid red;width: 30%;height: 100px;line-height: 100px;">
        line-height
    </div>
    <!-- 在单行文本的情况下，设置行高=div高可以达到一个单行文本居中效果 -->
    <!-- 
        displag
        显示方式的切换；inline-block行内块级元素，宽高设置有效且不会独占一行空间
                       inline行内元素，宽高设置无效
                       block块元素 ，宽高设置有效单独占一行空间
                       none 不显示，不占据屏幕空间，隐层元素不保留原始空间
                       flex 伸缩盒布局（弹性盒子）
                       grid 布局
                       -->
    <!-- visbility:hidden隐藏元素但是保留原始空间位置 visilit显示-->
    <!-- opacity透明度，0是全透明可以隐藏元素保留位置 -->
        <div style="text-align: center;border: 1px solid red;width: 30%;height: 100px;line-height: 100px;display: inline-block;">
            display1
        </div>
        <div style="text-align: center;border: 1px solid red;width: 30%;height: 100px;line-height: 100px;display: inline-block;">
            display2
        </div>
        <div style="text-align: center;border: 1px solid red;width: 30%;height: 100px;line-height: 100px;display: inline-block;">
            display3
        </div>
        <div style="text-align: center;border: 1px solid red;width: 30%;height: 100px;line-height: 100px;display: inline-block;">
            display4
        </div>
        <div style="text-align: center;border: 1px solid red;width: 30%;height: 100px;line-height: 100px;display: inline-block;">
            display5
        </div>
    <!-- 
        超出内容处理方式overflow
                 hidden隐藏超出内容 eg：隐藏图片超出部分
                 auto自动，超出部分会产生滚动条可用来查看超出部分，* 由浏览器定夺，如果内容被修剪，就会显示滚动条
                 scroll产生滚动条，内容会被修剪，浏览器会显示滚动条以便查看其余内容
                 overflow-x水平方向
                 overflow-y垂直方向==overflow：auto
                 -->
        <div style="text-align: center;border: 1px solid red;width: 30%;height: 100px;line-height: 100px;display: inline-block;overflow: scroll;">
            <div style="width: 1000px;height: 100px;border: 1px solid black;">
                display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1
            </div>
            <br>
            display6
        </div>
        <div >

        </div>
</body>
</html>